<template>
  <div ref="chartDom"/>
</template>

<script setup>
import {nextTick, onMounted, onUnmounted, ref} from 'vue';
import * as echarts from 'echarts';
import image_composition from '@/json/page2/image1-composition.json';

const chartDom = ref(null);
let chartInstance = null;
onMounted(async () => {
  await nextTick();
  chartInstance = echarts.init(chartDom.value);
  const option = {
    grid: {  // top,bottom,left,right等
      left: 0,
      right: 100,
      bottom: 40,
      containLabel: true
    },
    legend: {
      orient: 'vertical',
      right: 0,
      top: 'middle',
      itemHeight: 10,
      itemWidth: 5,
      data: [
        {name: '工资总额', icon: 'roundRect'},
        {name: '社保与公积金', icon: 'roundRect'},
        {name: '福利费用', icon: 'roundRect'},
        {name: '其他人工成本', icon: 'roundRect'}
      ]
    },
    series: [
      {
        type: 'pie',
        data: image_composition,
        center: ['40%', '50%'],
        radius: '60%',
        label: {
          show: true,
          position: 'inside',
          formatter: '{d}%'
        }
      }
    ]
  };
  chartInstance.setOption(option);
});

onUnmounted(() => {
  if (chartInstance != null && chartInstance.dispose) {
    chartInstance.dispose();
  }
});
</script>

<style scoped>

</style>